import React, { useState, useEffect } from "react";
import { homeRouter } from "../router";
import { NavLink, Outlet } from "react-router-dom";
import  Login  from "../components/Login.jsx";
import Hoc_login from "../utils/Hoc_login.jsx";
import style from "../style/home.module.css"; // 引入CSS文件

function Home() {
  const [activeItem, setActiveItem] = useState(null);
  const [isSticky, setIsSticky] = useState(false);

  useEffect(() => {
    const handleScroll = () => {
      if (window.scrollY > 60) { // 设置滚动距离阈值111111
        setIsSticky(true);
      } else {
        setIsSticky(false);
      }
    };

    window.addEventListener('scroll', handleScroll);
    return () => {
      window.removeEventListener('scroll', handleScroll);
    };
  }, []);
  const handleMouseEnter = (event) => {
    event.target.style.fontWeight = "bold";
    event.target.style.backgroundColor = "lightblue";
  };

  const handleMouseLeave = (event) => {
    if (event.target !== activeItem) {
      event.target.style.fontWeight = "normal";
      event.target.style.backgroundColor = "transparent";
    }
  };

  const handleClick = (event) => {
    if (activeItem && activeItem !== event.target) {
      activeItem.style.backgroundColor = "transparent";
      activeItem.style.fontWeight = "normal";
      activeItem.style.color = "#000";
    }

    if (activeItem !== event.target) {
      setActiveItem(event.target);
      event.target.style.backgroundColor = "lightblue";
      event.target.style.fontWeight = "bold";
      event.target.style.color = "blue";
    } else {
      setActiveItem(null);
      event.target.style.backgroundColor = "transparent";
      event.target.style.fontWeight = "normal";
      event.target.style.color = "#000";
    }
  };

  // 设置默认高亮的第一个元素
  useEffect(() => {
    const defaultItem = document.querySelector(".homeTitle");
    if (defaultItem) {
      setActiveItem(defaultItem);
      defaultItem.style.backgroundColor = "lightblue";
      defaultItem.style.fontWeight = "bold";
      defaultItem.style.color = "blue";
    }
  }, []);

  return (
    <div>
     <div className={isSticky ? 'header sticky' : 'header'}>
        <Login></Login>
      </div>
      <div className={style.box}>
        <div className={style.homeTopLeft}>
          {homeRouter.map((item) => (
            <NavLink
              key={item.path}
              to={item.path}
              style={{ color: "#000", textDecoration: "none" }}
            >
              <p
                className={style.homeTitle}
                onMouseEnter={handleMouseEnter}
                onMouseLeave={handleMouseLeave}
                onClick={handleClick}
                style={{
                  backgroundColor:
                    activeItem === item.title ? "lightblue" : "transparent",
                  fontWeight: activeItem === item.title ? "bold" : "normal",
                  color: activeItem === item.title ? "blue" : "#000",
                }}
              >
                {item.title}
              </p>
            </NavLink>
          ))}
        </div>
        <div style={{ width: "90%", height: "100vh" }}>
          <Outlet></Outlet>
        </div>
      </div>
    </div>
  );
}

export default Home;
